<template>
  <div>
    <div class="bg">
      <div class="title">分类</div>
    </div>
    <el-row type="flex" justify="center">
      <el-col :md="16" :sm="24" class="main">
        <el-card>
          <router-link
            :to="'/categories/' + item.id"
            v-for="(item, i) in classlist"
            :key="i"
          >
            {{ item.name }} <span>({{ item.num }})</span>
          </router-link>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getClassAll } from "@/api";
import { mapState } from "vuex";

export default {
  data() {
    return {
    };
  },computed:mapState({
    classlist:state => state.classlist
  })
};
</script>

<style lang="scss" scoped>
@import "../../assets/css/base.scss";
.bg {
  @include bg("/image/class.jpg");
  .title {
    font-size: 40px;
    font-weight: 900;
  }
}
.el-row {
  margin: 30px 5px 0;
}
.main {
  min-height: 50vh;
  min-height: calc(50vh - 10vh - 20px - 30px );
  .el-card {
    a {
      display: block;
      width: fit-content;
      padding: 10px 30px;
      color: var(--font-color);
      position: relative;
      transition: 0.5s;

      &::before {
        position: absolute;
        top: 15px;
        left: 0;
        content: "";
        display: block;
        border-radius: 50%;
        width: 8px;
        height: 8px;
        border: 4px solid #0ec1f8;
        transition: 0.5s;
      }
      &:hover {
        color: #38fc0c;
        span {
          color: #858585;
        }
        &::before {
          border: 4px solid #38fc0c;
        }
      }
      span {
        margin-left: 10px;
        font-size: 12px;
        line-height: 100%;
        color: #858585;
      }
    }
  }
}
@media screen and (max-width: 768px) {
  .title {
    font-size: 5vw !important;
  }
}
@media screen and (min-width: 768px) {
  .el-card {
    padding: 20px;
  }
}
</style>